<template>
  <div class="app-container">
    <el-card class="card-h-100">
      <div v-for="item in data" :key="item.value" style="margin-bottom: 5px;">
        <el-row :gutter="20">
          <el-col :span="24">
            <!-- <div class="item category">
              <span>{{ item.label }}</span>
            </div> -->
            <el-divider content-position="left">{{ item.label }}</el-divider>
          </el-col>
          <el-col v-for="child in item.children" :key="child.value" :span="4">
            <div class="item schema-item">
              <el-image :src="child.icon" fit="contain">
                <div slot="error" class="image-slot">
                  <el-image :src="noimg" fit="contain" />
                </div>
              </el-image>
              <span><router-link :to="'/cmdb/schemas/' + child.value" class="el-button el-button--text el-button">{{ child.label }}</router-link></span>
              <span style="margin-left: 10px"><router-link :to="{name: 'cmdb_instances', query: {schemadef: child.value}}" class="el-button el-button--text el-button">（{{ child.count }}）</router-link></span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>

import { outline } from '@neu/cmdb-ui/api/schema'
const noimg = require('@neu/cmdb-ui/assets/images/noimg.png')

export default {
  name: 'Dashboard',
  components: {
  },
  data() {
    return {
      data: [
      ],
      noimg: noimg
    }
  },
  created() {
    outline().then(response => {
      this.data = response.data
    })
  }
}
</script>

<style lang="scss" scoped>
  .item {
    display: flex;
    align-items: center;
    padding: 3px 0;
    &.category {
      margin-left: 5px;
      margin-bottom: 10px;
    }

    .el-image {
      width: 48px;
      height: 48px;
      margin-left: 5px;
      margin-right: 5px;
    }

    &.schema-item {
       margin-bottom: 5px;
       border: solid 1px #eee;
       border-radius: 2px;
    }
  }
</style>
